<template>
  <el-dialog :model-value="dialogAdd" width="25%" :before-close="handleClose">
    <template #header>
      <h3 style="padding-bottom: 10px">添加达人类型</h3>
    </template>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
      <el-form-item label="分类名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入分类名称"
          v-noSpace
          clearable
        />
      </el-form-item>
      <el-form-item label="父类子类" prop="isParent">
        <el-select
          v-model="form.isParent"
          placeholder="是否选择父类"
          clearable
          @change="handleParentChange"
        >
          <el-option label="父类" value="1" />
          <el-option label="子类" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="父类名称" prop="pid">
        <el-select
          v-model="form.pid"
          placeholder="请选择父类名称"
          clearable
          @focus="getClick"
          :loading="loading"
          :disabled="!form.isParent || form.isParent === '1'"
        >
          <el-option
            v-for="item in ParentList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import {
  getActivityExpertListSelect,
  addExpertType,
} from '@/api/Activity/expert';

// 添加用户数据
const form = ref({
  name: '',
  pid: '',
  isParent: '',
});
const ParentList = ref([]);
const loading = ref(false);

// 校验规则
const formRef = ref(null);
const rules = {
  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  isParent: [{ required: true, message: '是否选择父类', trigger: 'change' }],
  pid: [
    {
      required: true,
      message: '请选择父类名称',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (form.value.isParent === '0' && !value) {
          callback(new Error('请选择父类名称'));
        } else {
          callback();
        }
      },
    },
  ],
};

// 定义 props，接收父组件传递的数据
defineProps({
  dialogAdd: {
    type: Boolean,
  },
});

// 定义 emits，向父组件发送事件
const emit = defineEmits(['confirm', 'cancel']);

// 处理取消按钮的点击事件
const handleCancel = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  form.value = {};
  emit('cancel');
};

// 处理确认按钮的点击事件
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await addExpertType({
        name: form.value.name,
        pid: form.value.pid || 0,
        isParent: form.value.isParent,
        enabled: 1,
      });
      if (res.data.code === 200) {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: '添加成功',
          type: 'success',
        });
        emit('confirm');
        handleClose();
      } else {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: res.data.msg,
          type: 'error',
        });
      }
    }
  });
};
const getClick = () => {
  ActivityVenueType();
};
// 获取类型分类下拉
const ActivityVenueType = async () => {
  loading.value = true;
  try {
    const res = await getActivityExpertListSelect({});
    if (res.data.code === 200) {
      ParentList.value = res.data.data;
      console.log(ParentList.value);
    } else {
      // eslint-disable-next-line no-undef
      ElMessage({
        message: res.data.msg,
        type: 'error',
      });
    }
  } finally {
    loading.value = false;
  }
};

// 监听父类子类选择变化
const handleParentChange = () => {
  form.value.pid = '';
  // 重新触发表单验证
  if (formRef.value) {
    formRef.value.validateField('pid');
  }
};

// 监听isParent的变化，触发pid的校验
watch(
  () => form.value.isParent,
  (newVal) => {
    if (formRef.value) {
      formRef.value.validateField('pid');
    }
  }
);

// 关闭对话框
const handleClose = () => {
  handleCancel();
};

onMounted(() => {});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
